import React, { Component } from 'react'
import styles from './index.less'
import {
    Input, Tag, Icon, message
} from 'antd';


/**
 * 短信预发送列表
 */
export default class SmsList extends Component {

    state = {
        inputVisible: false,
        inputValue: '',
    };

    preventDefault(removedTag) {
        const {sendList, dispatch} = this.props
        const tags = sendList.filter(tag => tag.node.id !== removedTag.node.id);
        dispatch({
            type: 'sms/setSendList',
            payload: tags
        })
    }

    handleInputConfirm = ()=>{
        const state = this.state;
        const inputValue = state.inputValue;
        if(!inputValue){
            this.setState({
                inputVisible: false,
                inputValue: '',
            });
            return
        }

        const telNums = inputValue.split(",")
        console.log("去重前",telNums)
        let isOk = true
        let telNumList = [] 
        telNums.map((item,index)=>{
            if(isNaN(item) || item.length!=11){
                if(item){
                    message.error(`手动输入的第${index+1}个手机号码：【 ${item}】 格式有误，请检查电话号`);
                }
                isOk = false
            }
        })
        telNumList = this.uniq(telNums)
        console.log("去重后",telNumList)
        let lastList = []
        telNumList.map((item)=>{
            lastList.push(
                {   
                    type: 'handInp',
                    node: {
                        id: item,
                        name: item,
                        phone: item
                    }
                }
            )
        })

        if(isOk){
            const {addSendListFunc} = this.props
            addSendListFunc(lastList)
            lastList = []
            this.setState({
                inputVisible: false,
                inputValue: '',
            });
        }
    }

    //数组去重
    uniq = (array)=>{
        var temp = [];
        var index = [];
        var l = array.length;
        for(var i = 0; i < l; i++) {
            for(var j = i + 1; j < l; j++){
                if (array[i] === array[j]){
                    i++;
                    j = i;
                }
            }
            temp.push(array[i]);
            index.push(i);
        }
        return temp;
    }
    

    handleInputChange = (e) => {
        this.setState({ inputValue: e.target.value });
    }

    showInput = () => {
        this.setState({ inputVisible: true }, () => this.input.focus());
    }

    saveInputRef = input => this.input = input

    render() {
        const {sendList} = this.props
        const { inputVisible, inputValue } = this.state
        let tagSendList = []
        sendList.map((item,index)=>{
            //分组
            if(item.type === "group"){
                tagSendList.push(
                    <Tag key= {item.node.id} closable onClose={()=>{
                        this.preventDefault(item)
                    }}>{item.node.name}</Tag>
                )
            }
            //通讯录
            if(item.type === "telBook"){
                tagSendList.push(
                    <Tag key= {item.node.id} closable onClose={()=>{
                        this.preventDefault(item)
                    }}>{item.node.name} : {item.node.phone}</Tag>
                )
            }
            //手动输入
            if(item.type === "handInp"){
                tagSendList.push(
                    <Tag key= {item.node.id} closable onClose={()=>{
                        this.preventDefault(item)
                    }}>{item.node.name}</Tag>
                )
            }
        })


        return (
            <div className = {styles.content}>
                {inputVisible && (
                    <Input
                      className={styles.addBtn}
                      ref={this.saveInputRef}
                      type="text"
                      size="small"
                      style={{ width: '97%' }}
                      value={inputValue}
                      onChange={this.handleInputChange}
                      onBlur={this.handleInputConfirm}
                      onPressEnter={this.handleInputConfirm}
                    />
                  )}
                  {!inputVisible && (
                    <Tag
                      className={styles.addBtn}
                      onClick={this.showInput}
                      style={{ background: '#fff', borderStyle: 'dashed' , display:'block'}}
                    >
                      <Icon type="plus" /> 手动添加电话号，多个电话号请用英文半角','分割
                    </Tag>
                  )}
                {tagSendList}
            </div>
        )
    }
}
